<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>订单列表--共享车位管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal1" placeholder="请输入搜索订单号"/>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal2" placeholder="请输入搜索车位号"/>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal3" placeholder="订单创建时间"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
        </form>
    </blockquote>
    <table id="ordering" lay-filter="orderingList"></table>
    <!--操作-->
    <script type="text/html" id="orderkingBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    </script>
</form>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['form', 'layer', 'table', 'laytpl','laydate'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            laydate = layui.laydate;
            laydate.render({
            elem: '.searchVal3'
          });
        //订单表
        var tableIns = table.render({
            elem: '#ordering',
            url: 'orders',
            cellMinWidth: 95,
            page: true,
            height: "full-200",
            limits: [10, 15, 20, 25],
            limit: 10,
            id: "orderingListTable",
            cols: [[
                {field: 'num', title: '订单编号', align: 'center'},
                {field: 'name', title: '用户名称', align: 'center'},
                {field: 'createtime', title: '创建时间', align: 'center'},
                {field: 'endtime', title: '完成时间', align: 'center'},
                {field: 'muId', title: '车位号', align: 'center'},
                {field: 'location', title: '地址', align: 'center'},
                {field: 'status', title: '订单状态', align: 'center'},
                {title: '操作', width: 260, templet: '#orderkingBar', fixed: "right", align: "center"}
            ]]
        });
        //实现搜索功能
        $(".search_btn").on("click",function () {
            var num=$(".searchVal1").val()
            var muId=$(".searchVal2").val()
            var createtime=$(".searchVal3").val()
            table.reload("orderingListTable",{
                page:{
                    curr:1
                },
                where: {
                    num:num,
                    muId:muId,
                    createtime:createtime,
                }
            })
        })



        // tool(xx)这里的xx是和上边表个的lay-filter="userList"对应的
        table.on("tool(orderingList)", function (obj) {
            //获取当前行的数据
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    merchantoder(data);
                    break;
            }
        });
     function merchantoder(data) {
         var index=layui.layer.open({
             title: "详细信息",
             type: 2,
             content: "tomerchantorderz.do",
             area: ['500px', '600px'],
             success:function (res) {
                 var body = layui.layer.getChildFrame('body', index);
                 body.contents().find(".num").val(data.num)
                 body.contents().find(".name").val(data.name)
                 body.contents().find(".muId").val(data.muId)
                 body.contents().find(".location").val(data.location)
                 body.contents().find(".starttime").val(data.starttime)
                 body.contents().find(".endtime").val(data.endtime)
                 body.contents().find(".cash").val(data.cash)
                 body.contents().find(".money").val(data.money)
                 body.contents().find(".method").val(data.method)
                 body.contents().find(".status").val(data.status)

             }
         })
     }

    });


</script>
</body>
</html>